import React from 'react';
import { Checkbox, Col, Divider, Empty, Row, Input, List, Switch } from 'antd';
import _ from 'lodash';
import ArrayUtils from '../../../../utils/ArrayUtils';

const DEFAULT_LIST_GRID = { gutter: 16, column: 6 };
class SelectDimensionStep extends React.Component {
  static defaultProps = {
    emptyMessage: '暂无数据',
    pagination: false,
    listGrid: DEFAULT_LIST_GRID,
    onParentStateValueChange: () => {},
  };

  state = {
    checkAll: false,
    indeterminate: false,
    filterValue: '',
    onlyShowSelected: false,
  };

  constructor(pros) {
    super(pros);
    this.showDataMapper = {};
  }

  componentDidMount() {
    const { selectedDataList } = this.props;
    this.onCheckDataChangeEvent(selectedDataList);
  }

  onCheckAllEvent = e => {
    const { dataList, onParentStateValueChange } = this.props;
    const { checked } = e.target;
    this.setState(
      {
        checkAll: checked,
        indeterminate: false,
      },
      () => onParentStateValueChange(checked ? dataList.map(item => item.id) : [])
    );
  };

  onCheckEvent = valueList => {
    const { onParentStateValueChange, pagination, selectedDataList } = this.props;
    let newSelectedList = valueList;
    if (pagination !== false) {
      newSelectedList = selectedDataList.filter(item => !this.showDataMapper[item]);
      newSelectedList = _.uniq([...newSelectedList, ...valueList]);
    }
    this.onCheckDataChangeEvent(newSelectedList, onParentStateValueChange);
  };

  onCheckDataChangeEvent = (valueList, callback = () => {}) => {
    const { dataList } = this.props;
    this.setState(
      {
        checkAll: valueList.length === dataList.length,
        indeterminate: valueList.length > 0 && valueList.length < dataList.length,
      },
      () => callback(valueList)
    );
  };

  renderEmpty = () => {
    const { dataList = [], emptyMessage } = this.props;
    if (dataList.length === 0) {
      return <Empty description={emptyMessage} image={Empty.PRESENTED_IMAGE_SIMPLE} />;
    }
    return null;
  };

  onSearchValueChangeEvent = e => {
    this.setState({
      filterValue: e.target.value,
    });
  };

  getDataList = () => {
    const { dataList = [], selectedDataList = [] } = this.props;
    const { onlyShowSelected, filterValue } = this.state;
    let newList = dataList.filter(item => !filterValue || item.name.indexOf(filterValue) >= 0);
    if (onlyShowSelected) {
      const selectedMapper = ArrayUtils.toObject(selectedDataList, item => item, () => true);
      newList = newList.filter(item => selectedMapper[item.id] === true);
    }
    return newList;
  };

  renderContent = () => {
    const { dataList = [], selectedDataList = [], pagination, listGrid } = this.props;
    this.showDataMapper = {};
    if (dataList.length === 0) {
      return null;
    }
    const { checkAll, indeterminate } = this.state;
    return (
      <div>
        <Row>
          <Col span={10}>
            <Checkbox
              key="city_all_checkbox"
              indeterminate={indeterminate}
              onChange={this.onCheckAllEvent}
              checked={checkAll}
            >
              全选
            </Checkbox>
          </Col>
          <Col span={14}>
            <div style={{ float: 'right' }}>
              显示已选择:&nbsp;&nbsp;
              <Switch
                size="small"
                checkedChildren="是"
                unCheckedChildren="否"
                onChange={checked => this.setState({ onlyShowSelected: checked })}
              />
              &nbsp;&nbsp;过滤:&nbsp;&nbsp;
              <Input
                size="small"
                style={{ width: '150px' }}
                onChange={this.onSearchValueChangeEvent}
              />
            </div>
          </Col>
        </Row>
        <Divider type="horizontal" />
        <Checkbox.Group
          style={{ width: '100%', marginBottom: '10px' }}
          value={selectedDataList}
          onChange={this.onCheckEvent}
        >
          <List
            grid={{ ...DEFAULT_LIST_GRID, ...listGrid }}
            dataSource={this.getDataList()}
            pagination={pagination}
            renderItem={item => {
              this.showDataMapper[item.id] = true;
              return (
                <List.Item key={item.id}>
                  <Checkbox key={item.id} value={item.id}>
                    {item.name}
                  </Checkbox>
                </List.Item>
              );
            }}
          />
        </Checkbox.Group>
      </div>
    );
  };

  render() {
    return (
      <div className="SelectDimensionStep">
        <Divider type="horizontal" />
        {this.renderEmpty()}
        {this.renderContent()}
      </div>
    );
  }
}

export default SelectDimensionStep;
